@extends('layouts.app')
@section('title'){{$category_name}}-@parent @endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-9 topic-list">
                <div class="card">
                    <div class="card-header bg-white">
                        <ul class="nav nav-pills">
                            {{--<li class="nav-item"><a class="nav-link {{$order != 'recent'?'active':''}}" href="{{Request::url()}}?order=default">最后回复</a></li>--}}
                            <li class="nav-item"><a class="nav-link {{$order != 'recent'?'active':''}}" href="{{\gl\url(Request::url().'?order=default')}}">最后回复</a></li>
                            {{--<li class="nav-item"><a class="nav-link {{$order == 'recent'?'active':''}}" href="{{Request::url()}}?order=recent">最新发布</a></li>--}}
                            <li class="nav-item"><a class="nav-link {{$order == 'recent'?'active':''}}" href="{{\gl\url(Request::url().'?order=recent')}}">最新发布</a></li>
                            @if(isset($city))
                                <li class="nav-item links">
                                    <a class="nav-link" href="javascript:;" onclick="selectCommunity()">
                                        @if(isset($county))
                                            {{$county}}
                                        @endif
                                        @if(isset($community_name))
                                            -{{$community_name}}
                                        @endif
                                        @if(!isset($county) && !isset($community_name))
                                                【选择社区】
                                        @endif

                                    </a>
                                </li>
                            @endif
                        </ul>
                    </div>

                    <div class="card-body">
                        <ul class="media-list links">
                            @foreach($info as $v)
                                <li class="media">
                                    <div class="media-left" style="margin-left: -48px;">
                                        <a href="{{route('user',[$v->user->id])}}">
                                            <img src="{{$v->user->avatar ?? ''}}" title="" class="media-object img-thumbnail" style="width: 52px; height: 52px;">
                                        </a>
                                    </div>
                                    <div class="media-body" style="margin-left: 19px">
                                        <div class="media-heading">
                                            @if($v->order == -1)
                                                <span class="label label-warning">置顶</span>
                                            @endif

                                            <a class="font-weight-bold" href="{{\gl\url(route('topics.show',[$v->category->id,$v->id]))}}" title="{{$v->title ?? ''}}">
                                                {{$v->title ?? ''}}
                                            </a>

                                            {{--<a href="{{route('topics.show',[$v->category->id,$v->id])}}" class="pull-right" title="回复">--}}
                                                {{--<span class="badge"> {{$v->reply_count}} </span>--}}
                                            {{--</a> /--}}

                                            <a href="{{route('topics.show',[$v->category->id,$v->id])}}" class="pull-right" title="查看次数">
                                                <span class="badge"> {{$v->view_count}} </span>
                                            </a>
                                        </div>
                                        <div class="media-body meta" style="margin-top: 5px;">
                                            <a class="font-weight-light" href="" title="问答">
                                                <i class="icon-folder-open-alt"></i>
                                                {{$v->category->name ?? ''}}
                                            </a>
                                            <span> • </span>
                                            @if(isset($v->community))
                                                <a class="font-weight-light" href="#" title="来自">
                                                    {{--<i class="icon-folder-open-alt"></i>--}}
                                                    {{$v->community->province->name ?? ''}}<span> • </span>{{$v->community->city->name ?? ''}}-{{$v->community->name ?? ''}}
                                                </a>
                                            <span> • </span>
                                            @endif

                                            <i class="icon-time"></i>
                                            <span title="最后活跃于" class="font-weight-light">{{$v->created_at->diffForHumans()}}</span>
                                        </div>
                                    </div>
                                </li>
                                <hr>
                            @endforeach
                        </ul>
                        @if(!$info->isEmpty())
                            {{$info->appends($_GET)->links()}}
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <div class="card">
                    <div class="card-body">
                        <a href="{{route('topics.form')}}{{isset($category_id)?'?cat_id='. $category_id:''}}" aria-label="Left Align" class="btn btn-success btn-block">
                            <span aria-hidden="true" class="glyphicon glyphicon-pencil"></span> 发布信息
                        </a>
                    </div>
                </div>
                {{--@include('layouts._active_user')--}}

                @include('layouts._res_rec')
            </div>
        </div>
    </div>
    @if(isset($city))
        <div class="modal fade" id="select-community" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="get">
                        <div class="modal-header">
                            <h4 class="modal-title">按社区筛选</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <select class="form-control" name="county" id="county" @change="selectCounty">
                                    <option value="">请选择行政区</option>
                                    @foreach($county_info as $v)
                                        <option data-id="{{$v->id ?? ''}}" value="{{$v->name ?? ''}}">{{$v->name ?? ''}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <template v-if="communities.length > 0">
                                <div class="form-group">
                                    <label for="community">社区:</label>
                                    <select class="form-control" name="community">
                                        <option value="">请选择社区</option>
                                        <option v-for="option in communities" :value="option.name">@{{ option.name }}</option>
                                    </select>
                                </div>
                            </template>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确定</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

@endsection
@section('scripts')
    <script>
        function selectCommunity(){
            $('#select-community').modal('show');
        }
        new Vue({
            el:'#app',
            mounted() {

            },
            data() {
                return {
                    communities:[]
                }
            },
            methods:{
                selectCounty(){
                    var countyId = $('#county').find('option:selected').attr('data-id');
                    axios.post('{{route('communities.get_by_county_id')}}',{county_id:countyId}).then((response) => {
                        if (response.status) {
                            this.communities = response.data;
                        }
                    }).catch((error) => {

                    });
                }
            }
        });
    </script>
@endsection

